import { GlobalToken } from "antd";
import { CSSInterpolation } from "@ant-design/cssinjs";

export const genReactionsSetterStyle = (
    prefixCls: string,
    token: GlobalToken,
): CSSInterpolation => [
        {
            [`.${prefixCls}`]: {
                width: `100%`,
                minHeight: '623px',
                overflow: 'hidden',
                [`::-webkit-scrollbar`]: {
                    width: '5px',
                    height: '5px'
                },
                [`::-webkit-scrollbar-thumb`]: {
                    backgroundColor: `rgba(0, 0, 0, 0.2)`,
                    borderRadius: 0,
                    transition: 'all 0.25s ease-in-out'
                },
                [`::-webkit-scrollbar-thumb:hover`]: {
                    backgroundColor: `rgba(0, 0, 0, 0.3)`
                },
                [`.ant-collapse`]: {
                    border: `1px solid ${token.colorBorder}`,
                    [`&-header`]: {
                        padding: '8px 10px !important',
                        backgroundColor: `${token.colorBgContainer}!important`,
                        borderBottom: `1px solid ${token.colorBorder} !important`,
                        fontWeight: '500 !important',
                        [`.ant-collapse-arrow`]: {
                            marginRight: '4px !important'
                        }
                    },
                    [`&-item`]: {
                        border: `none !important`
                    },
                    [`&-content`]: {
                        border: `none !important`,
                        transition: `none !important`
                    },
                    [`&-content-box`]: {
                        padding: `12px !important`
                    }
                },
                [`.reaction-runner`]: {
                    [`.ant-collapse-content-box`]: {
                        padding: `12px 0 !important`
                    }
                },
                [`.reaction-state`]: {
                    [`.ant-collapse-content-box`]: {
                        padding: `12px 0 !important`
                    }
                },
                [`.dn-field-property-setter`]: {
                    display: 'flex',
                    height: '300px',
                    [`&-coder-wrapper`]: {
                        display: 'flex',
                        flexGrow: 2,
                        height: '100%',
                        paddingLeft: '10px',
                        position: 'relative',
                        flexDirection: 'column'
                    },
                    [`&-coder-start`]: {
                        fontSize: '18px',
                        lineHeight: '30px',
                        marginBottom: '4px',
                        color: token.colorText,
                        fontWeight: 300,
                        flexGrow: 0,
                        opacity: 0.96,
                        height: '31px'
                    },
                    [`&-coder-end`]: {
                        fontSize: '18px',
                        height: '31px',
                        color: token.colorText,
                        marginTop: '4px',
                        marginBottom: '4px',
                        lineHeight: '30px',
                        fontWeight: 300,
                        flexGrow: 0,
                        opacity: 0.96
                    },
                    [`&-coder`]: {
                        minWidth: 0,
                        flexGrow: 2,
                        paddingLeft: '10px'
                    }
                }
            }
        }
    ]